<template>
  <div>
    <el-table class="userTable" :data="orderList" style="width:100%" height=600>
      <el-table-column prop="id" label="编号" width="100">
      </el-table-column>
      <el-table-column prop="orderId" label="订单编号" align="center">
      </el-table-column>
      <el-table-column prop="price" label="订单价格" align="center">
      </el-table-column>
      <el-table-column prop="isPay" label="是否付款" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.isPay?'success':'info'">{{scope.row.isPay?'已支付':'未支付'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="orderTime" label="下单时间" align="center">
      </el-table-column>
      <el-table-column prop="isSent" label="是否发货" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.isPay?'success':'info'">{{scope.row.isPay?'已支付':'未支付'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="60">
        <el-button class="optBtn" type="primary" icon="el-icon-edit" size="mini" @click="dialogFormVisible=true">
        </el-button>
      </el-table-column>
    </el-table>
    <!-- 弹窗修改地址 -->
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <change-path :options="options" :closeDig="closeDig" @addUpdata="addUp"></change-path>
    </el-dialog>
  </div>

</template>

<script>
import { orderList, addChange } from '_api'
import axios from 'axios'
import ChangePath from './components/changePath.vue'
export default {
  data() {
    return {
      dialogFormVisible: false,
      orderList: [],
      options: []
    }
  },
  methods: {
    getOrder() {
      orderList().then(res => {
        if (res.data.code == 200) {
          this.orderList = res.data.list
        }
      })
    },
    // 关闭弹出
    closeDig() {
      this.dialogFormVisible = false
    },
    // 提交订单
    addUp(val) {
      addChange(val).then(res => {
        if (res.data.code == 200) {
          this.$message({
            type: 'success',
            message: '提交成功!',
            onClose: () => {
              this.$router.go(0)
            }
          })
        }
      })
    },
    // 获取百度的所有省市区
    getAddress() {
      axios({
        method: 'get',
        url: 'https://restapi.amap.com/v3/config/district?parameters',
        params: {
          key: '3a708a4ef5e3af28694b1c861985a5ce',
          keyWords: '中国',
          subdistrict: 3
        }
      }).then(res => {
        // 修改数据成为可以使用的数组
        const dist = res.data.districts[0]
        dist.districts.forEach(item => {
          if (!item.districts.length) {
            Reflect.deleteProperty(item, 'districts')
          } else {
            item.districts.forEach(initem => {
              if (!initem.districts.length) {
                Reflect.deleteProperty(initem, 'districts')
              } else {
                initem.districts.forEach(inner => {
                  Reflect.deleteProperty(inner, 'districts')
                })
              }
            })
          }
        })
        console.log(dist)
        this.options = dist.districts
      })
    }
  },
  components: { ChangePath },
  created() {
    this.getOrder()
    this.getAddress()
  }
}
</script>

<style lang="scss" scoped>

</style>
